<template>
  <div class="app-container home">
    <div class="userinfo">
      <img src="../assets/images/avatar.png" alt="" />
      <div class="info">
        <p class="name">你好，{{ username }}，祝你开心每一天！</p>
        <span>
          如果想修改登录密码，请点击 <el-button link type="primary" @click="handleChange">修改密码</el-button>
        </span>
      </div>
    </div>
    <ChangePasswd v-model="visible" />
    <div class="charts">
      <div class="chart-item">
        <p>今日耗材</p>
        <div id="chart1" class="chart"></div>
      </div>
      <div class="chart-item">
        <p>待确认订单</p>
        <div id="chart2" class="chart"></div>
      </div>
    </div>
  </div>
</template>

<script setup name="Index">
import ChangePasswd from "./system/user/changePasswd.vue";
import useUserStore from "@/store/modules/user";
import { getIndexInfo } from "@/api/common";
import { onMounted } from "vue";

const store = useUserStore();
const username = computed(() => store.nick_name);

const visible = ref(false);

const data = reactive({
  today: [], // 今日耗材
  pending: [] // 待确认订单
});

onMounted(async () => {
  await getData();
  getCharts("chart1", data.today, "今日耗材");
  getCharts("chart2", data.pending, "待确认订单");
});

async function getData() {
  const txtObj = {
    received: "已入库",
    outbound: "已出库",
    canceled: "已退还",
    returned: "已退货",
    order_in: "待入库",
    order_out: "待出库",
    order_waste: "待换货"
  };
  const res = await getIndexInfo();
  if (res.code === 0) {
    console.log(res.data);
    const { today_consumables, pending_review } = res.data || {};
    for (let key in today_consumables) {
      data.today.push({ key, value: today_consumables[key], name: txtObj[key] });
    }
    for (let key in pending_review) {
      data.pending.push({ key, value: pending_review[key], name: txtObj[key] });
    }
  }
}

const handleChange = () => {
  visible.value = true;
};

async function getCharts(id, data, title) {
  var chartDom = document.getElementById(id);
  var myChart = echarts.init(chartDom);
  var option = {
    title: {
      text: title,
      left: "center",
      top: "center",
      textStyle: {
        color: "#999",
        fontWeight: "normal",
        fontSize: 16
      }
    },
    tooltip: {
      trigger: "item"
    },
    legend: {
      top: "5%",
      left: "right",
      orient: "vertical"
    },
    series: [
      {
        name: "",
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2
        },
        label: {
          show: true,
          position: "outside",
          formatter: "{b}: {c}"
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 16,
            fontWeight: "bold"
          }
        },
        labelLine: {
          show: true
        },
        data
      }
    ]
  };

  option && myChart.setOption(option);
}
</script>

<style scoped lang="scss">
.home {
  padding: 40px;
  .userinfo {
    display: flex;
    align-items: center;
    img {
      width: 70px;
      height: 70px;
      margin-right: 20px;
    }
    .name {
      color: rgba(0, 0, 0, 0.88);
      font-weight: 500;
      font-size: 20px;
      line-height: 28px;
      margin-top: 0;
      margin-bottom: 10px;
      + span {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.65);
        line-height: 22px;
      }
    }
  }
  .charts {
    display: flex;
    padding-top: 30px;
  }
  .chart-item {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 400px;
    margin: 10px;
    box-shadow: 0 0 5px 1px #eee;
    p {
      font-size: 18px;
      font-weight: bold;
      border-bottom: 1px solid #eee;
      margin: 0;
      padding: 20px;
    }
  }
  .chart {
    flex: 1;
    padding: 0 20px;
  }
}
</style>
